<template>
  <div class="content">
      <div>
          <van-nav-bar class="nav-bar-style" left-arrow @click-left="onClickLeft">
              <template #title>
                  <div class="nav-bar-title-style">盘库详情</div>
              </template>
              <template #left>
                  <van-icon size="30" name="arrow-left" color="#FFF" />
              </template>
          </van-nav-bar>
      </div>

      <!-- 列表 -->
      <van-pull-refresh class="pull-refresh-style" v-model="refreshing" @refresh="onRefresh">
          <van-list
            :offset="offset"
            :finished="finished"
            finished-text="没有更多了"
            @load="getInStorageList"
          >
              <van-cell>
                  <div class="listCont">
                      <div class="list">
                          <div class="titleSignalStyle">
                              <img src="@/assets/ic_left_blue_signal.png" width="5px" height="22px" />
                              <span class="titleSignalTextValue">{{title}}</span>
                          </div>
                          <li class="totoalItemStyle" v-for="(item,index) in list">
                              <div class="itemDescript">
                                  <div class="leftLi">
                                      <div class="title">物料名称</div>
                                      <div class="desc">{{item.materialName}}</div>
                                  </div>
                                  <div class="leftLi">
                                      <div class="title">物料编号</div>
                                      <div class="desc">{{item.materiaCode}}</div>
                                  </div>
                                  <div class="leftLi">
                                      <div class="title">已盘/库存</div>
                                      <div class="desc">{{item.haveChecked}}/{{item.stockNum}}</div>
                                  </div>
                              </div>
                              <div class="itemRightButtonStyle">
                                  <van-button
                                    class="btnStyle"
                                    round
                                    type="info"
                                    plain
                                    hairline
                                    @click="skipToMaterialDetail(item.checkStockMaterialId)"
                                    size="large"
                                  >结束</van-button>
                              </div>
                          </li>
                      </div>
                  </div>
              </van-cell>
          </van-list>
      </van-pull-refresh>
  </div>
</template>

<script>
  import router from "@/router";
  import { Dialog } from 'vant';
  import http from '@/utils/request.js';
  import api from '@/utils/api.js';
  export default{
    data(){
      return{
        title:'',
        list:[],
        offset: 0,
        finished: false,
        refreshing: false,
      }
    },
    methods:{
      onClickLeft() {
          router.push({ path: "/SeeStorageIndex" });
      },
      skipToMaterialDetail(checkStockMaterialId){
          var param={
            checkStockMaterialId:checkStockMaterialId
          };
          http.fetchPost(api.commintSingleMaterial, param, "加载中...").then(res => {
              if (res.code === 1) {
                  Dialog.confirm({
                    title: "友情提示",
                    message: res.data.msg,
                  }).then(() => {
                      this.endSkip(checkStockMaterialId)
                  }).catch(() => {

                  });
              }
          }).catch(err => {

          });

      },
      //单条结束
      endSkip(checkStockMaterialId){
          var param={
            checkStockMaterialId:checkStockMaterialId
          };
          http.fetchPost(api.sureCommintSingleMaterial, param, "加载中...").then(response => {
              if (response.code === 1) {
                this.getInStorageList()
              }
          }).catch(err => {

          });
      },
      //初始化
      getInStorageList(){
          this.loading = true;
          var params = {
            planId:this.$route.query.id
          }
          http.fetchGet(api.getCheckAllMaterial, params,'加载中...').then(res => {
              if(res.code === 1){
                  this.title = res.data.storeName;
                  this.list = res.data.checkStockPlanList;
                  this.finished = true; //是否已加载完成，加载完成后不再触发load事件
                  this.refreshing = false; //下拉刷新时，顶部是否处于加载中状态
              }
          }).catch(err => {
              console.log(err)
          });
      },
      //下拉刷新
      onRefresh(){
        this.getInStorageList()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .nav-bar-style {
    background: #2E71FF;
    color: #fff;
  }
  .nav-bar-title-style {
    font-size: 22px;
    text-align: center;
    font-family: PingFangSC-Regular;
    color: #fff;
    margin-right: 62px;
  }


  .titleSignalStyle {
    background-color: #F6F6F6;
    padding: 15px;
    box-sizing: border-box;
    font-weight: 800;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .titleSignalTextValue {
    font-size: 20px;
    margin-left: 10px;
    width: auto;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #333333;
  }
  .totoalItemStyle {
    border-bottom: 1px solid #DDDDDD;
    display: flex;
    padding: 16px 8px;
    flex-shrink: 1;
    font-size: 20px;
    align-items: flex-start;
    background-color: #fff;
    flex-grow: 1;
    width: 100%;
    justify-content: space-between;
    flex-flow: row nowrap;
    align-items: center;
  }
  .itemDescript {
    width: auto;
    width: 72%;
    font-size: 20px;
  }
  .leftLi {
    display: flex;
    width: 100%;
    line-height: 40px;
    font-size: 20px;
    word-break: keep-all;
    /* white-space: nowrap; */
    justify-content: flex-start;
    flex-direction: row;
    text-align: left;
  }
  .title {
    display: flex;
    min-width: 27%;
    flex-wrap: nowrap;
    font-size: 20px;
    color: #999999;
    align-self: flex-start;
    align-items: flex-start;
    text-align: left;
  }
  .desc {
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
    width: auto;
    margin-left: 20px;
    font-size: 20px;
    color: #333333;
    text-align: left;
  }
  .btn {
    height: 36px;
    line-height: 36px;
    min-width: 100px;
    border-radius: 50px;
  }
  .itemRightButtonStyle {
    text-align: flex-end;
    width: auto;
    align-items: flex-end;
    margin-right: 25px;
    width: 20%;
  }
  .btnStyle {
    width: 95px;
    height: 36px;
    color: #2E71FF;
    border-color: #2E71FF;
  }

  .endPK{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
  }
  .endBtn{
    width: 100%;
    height: 100%;
  }
</style>
